<template>
    <div style="display: flex; flex-direction: column;">
        <div style="width: 100%; text-align: right; font-size: 14px;">{{title}} / 充电口 &nbsp;&nbsp; {{stat['piles']}} / {{stat['ports']}}</div>
        <div ref="chart" style="height: 200px;"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: 'Pie',
  components: {  },
  props: {
    title: {
      type: String,
    },
    stat: {
      type: Object,
    },
    data: {
      type: Array,
    },
  },
  data() {
    return {
      chart:null,
    };
  },
  mounted(){
    this.$nextTick(() => {
      this.chart = this.$refs.chart
      var option = {
          tooltip: {
              trigger: 'item'
          },
          title: {
              show: true,
              text: this.title,
              top: 'center',
              left: '24%',
          },
          legend: {
              show: true,
              top: '10%',
              right: 10,
              bottom: 10,
              orient: 'vertical',
          },
          series: [
              {
                  name: this.title,
                  type: 'pie',
                  center: ['30%', '50%'],
                  left: 0,
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'right'
                  },
                  emphasis: {
                      label: {
                          show: false,
                          fontSize: 40,
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: this.data,
                  // data: [
                  //     {value: 1048, name: 'Search Engine'},
                  //     {value: 735, name: 'Direct'},
                  //     {value: 580, name: 'Email'},
                  //     {value: 484, name: 'Union Ads'},
                  //     {value: 300, name: 'Video Ads'}
                  // ]
              }
          ],
          // grid: {
          //     x: 5, //默认是80px
          //     y: 5, //默认是60px
          //     x2: 5, //默认80px
          //     y2: 5 //默认60px
          // }
      };

      const echart = echarts.init(this.chart, "macarons");
      echart.setOption(option)
    })
  },
  methods: {

  }
}
</script>
